<template>
    <div class="login-index-wrap">
        <p class="logo-wrap">
<!--            <ev-iconFont icon="icon-zhongguoliantong"></ev-iconFont>-->
            <img src="~@/assets/logo2.png">
        </p>

        <div class="form-wrap">
            <div class="left-img-wrap">
                <el-carousel>
                    <el-carousel-item v-for="(item, index) in leftImages" :key="index">
                        <img :src="item">
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div class="content-wrap">
                <el-form :ref="editFormRef" :model="formData" :rules="rules" @submit.native.prevent>
                    <p class="title">欢迎使用资产管理系统</p>

                    <el-form-item prop="username">
                        <el-input placeholder="请输入用户名" v-model="formData.username" @keyup.enter.native="submitHandler"></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input type="password" placeholder="请输入登录密码" v-model="formData.password" @keyup.enter.native="submitHandler"></el-input>
                    </el-form-item>

                    <el-form-item class="button" :class="{
                        'is-login': submiting
                    }" style="margin-top: 25px !important;">
                        <el-button type="primary" @click="submitHandler">{{submiting ? '正在登录系统' : '登录'}}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <p class="copyright-wrap">
            <span>银丰<em>•</em>诚信与品质的保证</span>
            <span>© 1999 - {{new Date().format('yyyy')}} YinFeng Real Group Co.,Ltd</span>
        </p>
    </div>
</template>

<script>
    export default JBoot({
        props: {},

        data() {
            return {
                moduleName: 'user',
                submitMethod: 'login',
                editFormRef: 'editFormRef',
                showSubmitMask: false,
                rules: {
                    username: [{required: true, message: '请输入用户名'}],
                    password: [{required: true, message: '请输入密码'}]
                },
                leftImages: [
                    require('@/assets/login/login-img-01.jpg'),
                    require('@/assets/login/login-img-02.jpg'),
                    require('@/assets/login/login-img-03.jpg'),
                    require('@/assets/login/login-img-04.jpg')
                ]
            }
        },

        created (){
            this.$busListener('user-auth-fail', error => {
                let errorMessage = ((error.response || {}).data || {}).message;

                this.$error(errorMessage);

                this.submiting = false;

                this.$closeAllMask();
            });
        },

        computed: {},

        methods: {
            submitSuccess ({ data, code, message }){
                if(code === 999){ //账号未开通权限
                    this.notOpenPermission = true;
                }else{
                    this.$token.setToken(data);
                    this.$jump({ name: '/' });
                }
            }
        },

        watch: {}
    }).form().build();
</script>

<style lang="scss">
    .login-index-wrap {
        width: 100%;
        height: 100%;
        background-color: #f5f7fa;
        user-select: none;
        position: relative;
        & > .logo-wrap{
            position: absolute;
            top: 20px;
            left: 20px;
            line-height: inherit;
            & > i{
                color: #d81e06;
                font-size: 30px;
            }
            & > img{
                height: 35px;
            }
        }
        & > .form-wrap{
            width: 950px;
            height: 400px;
            background-color: #ffffff;
            box-shadow: 0 5px 10px 0 rgba(28,5,62,.05), 0 10px 40px 0 rgba(23,26,53,.05);
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -35%);
            border-radius: 2px;
            & > .left-img-wrap{
                vertical-align: middle;
                display: inline-block;
                width: 550px;
                height: 100%;
                border-radius: 2px 0 0 2px;
                border-right: 1px solid #f6f7f9;
                & > .el-carousel{
                    width: 100%;
                    height: 100%;
                    & > .el-carousel__container{
                        width: 100%;
                        height: 100%;
                        & > .el-carousel__arrow{
                            display: none;
                        }
                        & > .el-carousel__item{
                            & > img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
            & > .content-wrap{
                width: 350px;
                display: inline-block;
                vertical-align: middle;
                position: relative;
                padding: 0 20px;
                & > .el-form{
                    text-align: center;
                    & > .title{
                        font-size: 20px;
                        font-weight: 300;
                        margin-bottom: 25px;
                    }
                    & > .el-form-item{
                        margin-bottom: 25px;
                        & > .el-form-item__content{
                            & > .el-input{
                                & > input{
                                    /*border-radius: 2px;*/
                                    /*height: 35px;*/
                                    /*border-color: #eceef1;*/

                                    border-radius: 2px;
                                    height: 40px;
                                    border-color: #eceef1;
                                    font-size: 14px;
                                }
                            }
                        }
                        &.button{
                            & > .el-form-item__content{
                                & > .el-button{
                                    width: 100%;
                                    background-color: #0DB3A6;
                                    border-color: #0DB3A6;
                                    border-radius: 2px;
                                    height: 36px;
                                    font-size: 14px;
                                    font-weight: 400;
                                    margin-top: 20px !important;
                                }
                            }
                        }
                        &.is-login > .el-form-item__content > .el-button{
                            background-color: #9E9E9E !important;
                            border-color: #9E9E9E !important;
                        }
                    }
                }
            }
        }
        & > .copyright-wrap{
            position: absolute;
            left: 50%;
            bottom: 5px;
            transform: translate(-50%, 0);
            font-size: 12px;
            font-weight: 300;
            & > span{
                display: block;
                text-align: center;
                & > em{
                    color: #ababad;
                    margin: 0 3px;
                }
                &:first-child{
                    color: #606266;
                }
                &:last-child{
                    color: #b7b7b7;
                }
            }
        }
    }
</style>
